<style lang="scss">
  .btn-text{
    font-size:8px
  }
  .searchbtn{
    margin-left:34%
  }
  .v-modal {
    z-index: 10 !important;
  }
  .alarm-search {
    height: 40px;
  }
  .el-tabs--border-card >.el-tabs__content {
    padding: 0!important;
  }
  .record-pagination {
    margin-top: 10px;
    text-align: right;
  }
  .pagination {
    padding-right: 0!important;
  }
   .create-title {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 10px;
    font-size: 16px;
    margin-bottom: 30px;
    font-weight: normal;
  }
  .alarmLevel {
    cursor: pointer;
  }
 .fontOne{
    font-size: 15px;
    width:80px;
    height:33px;
    float:left;
    font-weight:bold;
    background-color: rgb(238, 241, 246);
    padding-left:10px;
    margin-right:12px;
  }
  .fontTwo{
    font-size: 15px;
    width:800px;
    height:33px;
  }
  .filter-bar-query{
    height: 40px;
    padding: 0 10px;
    border-bottom: 1px solid #e5e5e5;
  }
  .main-content{
    padding: 0!important
  }
  .mousePointer{
    cursor:pointer;
  }
// .el-table .cell {
//    padding: 0!important;
//    width: 916px!important;
// }
.dialogRowStyle{
  border-bottom: 1px solid rgb(223, 230, 236);
  padding-left: 2px;
  padding-top: 11px;
  // padding-bottom: 3px;
  line-height: 33px;
}
</style>
<template>
   <div class="filter-bar-query" >
    <el-row style="height: 25px;" >
       <el-col :span="1" style="text-align: center">
        <el-button size="small" type="primary" @click="createAlarm('/alarm-create/')" class="el-icon-plus"> 新建告警</el-button>
      </el-col>
      <el-col :span="4" :offset="19">
      <el-input class="search-box" placeholder="搜索" icon="search" size="small" v-model="search" @keyup.enter.native = "SearchalarmContent" @click='SearchalarmContent'>
      </el-input>
        <!--<el-input size="small" v-model="search" placeholder="请输入"></el-input>-->
      </el-col>
      <!--<el-col :span="1"  style="text-align: center">
        <el-button size="small" type="primary" >搜索</el-button>
      </el-col>-->
    </el-row>
    <template >
      <div style="margin-top:25px;">
      <!--<el-tab-pane :name="alarmLevels[0]" label="一级" ></el-tab-pane>
      <el-tab-pane :name="alarmLevels[1]" label="二级"></el-tab-pane>
      <el-tab-pane :name="alarmLevels[2]" label="三级"></el-tab-pane>
      <el-tab-pane :name="alarmLevels[3]" label="四级"></el-tab-pane>
      <el-tab-pane :name="alarmLevels[4]" label="五级"></el-tab-pane>
      <el-tab-pane name="all" label="全部"></el-tab-pane>-->
      <el-table :data="alarmRecordList"  @sort-change="alarmSortChange">
        <el-table-column prop="alarmTime" label="告警时间" min-width="13%" :sort-method="sortTime" sortable="costom" class="alarmLevel"></el-table-column>
        <el-table-column prop="systemName" label="应用" min-width="12%"></el-table-column>
        <el-table-column prop="tierName" label="Tier" min-width="9%"></el-table-column>
        <el-table-column prop="monitorName" label="实例" min-width="11%"></el-table-column>
        <!--<el-table-column prop="alarmLevel" label="告警级别" :sort-method="sortLevel" sortable="costom" class="alarmLevel" min-width="11%"></el-table-column> -->
        <el-table-column prop="eventTypeName" label="事件类型" min-width="12%"></el-table-column>
        <el-table-column class="mousePointer" prop="strategyName" label="告警名称" min-width="8%" ></el-table-column>
        <el-table-column class="" prop="" label="发送通道" min-width="9%" >
          <template scope="scope">Onduty</template>
        </el-table-column>
        <el-table-column prop="alarmValue" label="告警值" min-width="8%"></el-table-column>
        <el-table-column prop="status" label="状态" min-width="7%"></el-table-column>
        <el-table-column prop="" min-width="11%" label="告警信息">
           <template scope="scope" type="small">
             <el-button class="btn-text" type="text" @click="initDialog(scope.row)">详情</el-button>
              <el-dialog title="告警信息详情" :visible.sync="detail" size="small"> 
                <el-table :data="dialogAlarmList" :show-header="false">
                  <el-table-column prop="alarmContent" label="告警内容">
                    <template scope="scope">
                    
                      <div class="dialogRowStyle"><div class="fontOne" >应用：</div><div class="fontTwo">{{scope.row.systemName}}</div></div>
                      <div class="dialogRowStyle"><div class="fontOne">Tier：</div><div class="fontTwo">{{scope.row.tierName}}</div></div>
                      <div class="dialogRowStyle"><div class="fontOne">实例：</div><div class="fontTwo">{{scope.row.monitorName}}</div></div>
                      <div class="dialogRowStyle"><div class="fontOne">告警级别：</div><div class="fontTwo">{{scope.row.alarmLevel}}</div></div>
                      <div class="dialogRowStyle"><div class="fontOne">事件类型：</div><div class="fontTwo">{{scope.row.eventTypeName}}</div></div>
                      <div class="dialogRowStyle"><div class="fontOne">策略名称：</div><div class="fontTwo">{{scope.row.strategyName}}</div></div>
                      <div class="dialogRowStyle"><div class="fontOne">规则名称：</div><div class="fontTwo">{{scope.row.ruleName}}</div></div>
                      <div class="dialogRowStyle"><div class="fontOne">阈值：</div><div class="fontTwo">{{scope.row.threshold}}</div></div>
                      <div class="dialogRowStyle"><div class="fontOne">告警值：</div><div class="fontTwo">{{scope.row.alarmValue}}</div></div>
                      <div class="dialogRowStyle"><div class="fontOne">告警时间 :</div><div class="fontTwo">{{scope.row.alarmTime}}</div></div>
                      <div style=" padding-left: 3px;padding-top: 11px;line-height:33px;border-bottom:11px;"><div class="fontOne">告警内容 :</div><div class="fontTwo">{{scope.row.alarmContent}}</div></div>
                    </template>
                   
                  </el-table-column>
                </el-table>   
          </el-dialog>
          </template>
        </el-table-column> 
      </el-table>     
    <el-row v-if="total > 10">
      <el-col class="record-pagination">
        <el-pagination
          class="pagination"
          @current-change="recordCurrentChange"
          :current-page.sync="recordPage"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
  </template>
  </div>
</template>
<script>
  import { Tabs, Table, TableColumn, Button, Dialog , Input, Row, Col, Pagination, Form,FormItem } from 'element-ui'
  export default {
    data() {
      return {
        detail:false,
        clickTable:true,
        name:'',
        search: '',
        activeName2: 'first',
        alarmRecordList: [],
        total: 0,
        dialogFormVisible: false,
        form: {
          name: '',
          search: ''
        },
        formLabelWidth: '120px',
        search: '',
        recordPage: 1,
        alarmLevels: [],
        alarmLevelsMap: {
          '一级': 1,
          '二级': 2,
          '三级': 3,
          '四级': 4,
          '五级': 5,
        },
        alarmTraceId: 0,
        dialogAlarmList: [],
        alarmSortLevel: '',
        alarmSortTime: '',
        systemId: ''
      };
    },
    
    watch: {
      search (v) {
        if (!v) {
          this._alarmTraceList ()
        }
      }
    },
    created(){
      this.systemId = sessionStorage.getItem('curSystemId')
      this._alarmTraceList()
      this._alarmLevels()
      this.$root.eventBus.$on('system-or-time-change', this.eventBus)
      // this._alarmTraceById()
    },
    destroyed () {
      this.$root.eventBus.$off('system-or-time-change', this.eventBus)
    },
    methods: {
      // clickTabs (v) {  
      //   console.log(v)
      //   this.name = v.name
      //    this._alarmTraceList()
      // },
      eventBus (v) {
        this.systemId = v.curSystem.id
        this._alarmTraceList()
      },
      initDialog(v){
        this.alarmTraceId = v.id
        this.detail = true
        this._alarmTraceById()
      },
     
      sortLevel (a, b) {
        return this.alarmLevelsMap[b.alarmLevel] - this.alarmLevelsMap[a.alarmLevel] > 0
      },
      sortTime (a, b) {
      },
      recordCurrentChange(v){
        this.recordPage = v
        this._alarmTraceList()
      },
      _alarmTraceById(){
        var _this = this
        this.api.alarmTraceById({
           url: '/alarmmanage/alarm/trace/' + this.alarmTraceId
        }).then(function(data){
          // console.log(data)
          _this.dialogAlarmList = [data.data]
        })
      },
      _alarmLevels () {
        var _this = this
        this.api.alarmLevels()
        .then(function (data) {
          data.data.forEach((v, i) => {
            _this.alarmLevels.push(v.alarmLevelName)
          })
        })
      },
      alarmSortChange (c, p, o) {
        this.alarmSortLevel = ''
        this.alarmSortTime = ''
        if (c.prop === 'alarmLevel') {
          if (c.order === 'ascending') {
            this.alarmSortLevel = 'asc'
          } else {
            this.alarmSortLevel = 'desc'
          }
        } 
        if (c.prop === 'alarmTime') {
          if (c.order === 'ascending') {
            this.alarmSortTime = 'asc'
          } else {
            this.alarmSortTime = 'desc'
          }
        }
        this._alarmTraceList()
      },
      _alarmTraceList () {
        this.alarmRecordList = []
        var data = { 
          
        }
        var _this = this
        if(this.search){
          data.queryWord = this.search
        }
        if(this.name){
          data.alarmLevelId = this.name 
        }
        if (this.alarmSortLevel) {
          data.alarmLevel = this.alarmSortLevel
        }
        if (this.alarmSortTime) {
          data.alarmTime = this.alarmSortTime
        }
        if (this.systemId) {
          data.systemId = this.systemId
        }
        this.api.alarmTraceList({
          url: '/alarmmanage/alarm/trace/list/' + (this.recordPage-1) + '/10',
          data: data
        }).then(function(data){
          _this.total = data.total
          _this.alarmRecordList = data.data 
        })
      },
      SearchalarmContent(){
        this._alarmTraceList()
      },
      createAlarm (path) {
        // console.log(path)
        this.$router.push(path)
      }
    },
    components: {
      'el-tabs': Tabs,
      'el-table': Table,
      'el-table-column': TableColumn,
      'el-button': Button,
      'el-dialog': Dialog,
      'el-input':Input,
      'el-row': Row,
      'el-col': Col,
      'el-pagination': Pagination,
      'el-form':Form,
      'el-form-item':FormItem
    }
  };
</script>
